<template>
    <div class="container">
      <div class="header">
        <i class="el-icon-collection"></i>
        <span>重建序列</span>
      </div>
      <div class="content">
        <!-- <el-input placeholder="请输入内容" v-model="input" clearable> </el-input> -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="display: flex;">
          <el-form-item label="请输入">
            <el-input v-model="formInline.user" placeholder="请输入编码/名称/位置/经纬度/人员等信息" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="onSubmit" icon="el-icon-refresh-left">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-download">导出</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit" icon="el-icon-upload2">导入</el-button>
          </el-form-item>
          <el-form-item style="margin-left: auto;">
            <el-button type="primary" @click="onSubmit" icon="el-icon-plus">新建</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" ref="multipleTable" border style="width: 100%"
          @selection-change="handleSelectionChange" tooltip-effect="dark"
          :header-cell-style="{ background: '#03146b', color: '#fff', fontSize: '18px', 'text-align': 'center',padding: '16px 0' /* 调整这里的值以改变高度 */ }"
          :cell-style="{ 'text-align': 'center',fontSize: '13px' }">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column fixed prop="serial" label="序号" width="70">
          </el-table-column>
          <el-table-column prop="numbering" label="实验室统一编号" width="150">
          </el-table-column>
          <el-table-column prop="codename" label="代号" width="70">
          </el-table-column>
          <el-table-column prop="name" label="名称" width="80">
          </el-table-column>
          <el-table-column prop="address" label="采样点位置">
          </el-table-column>
          <el-table-column prop="data" label="采样时间" width="100">
          </el-table-column>
          <el-table-column prop="personnel" label="采样人员" width="120">
          </el-table-column>
          <el-table-column prop="leader" label="数据负责人" width="120">
          </el-table-column>
          <el-table-column prop="species" label="树种">
          </el-table-column>
          <el-table-column prop="longitude" label="经度" width="100">
          </el-table-column>
          <el-table-column prop="latitude" label="纬度" width="100">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div style="display: flex; justify-content: center; gap: 8px;">
                <el-button size="mini" type="primary" plain icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)">数据</el-button>
                <el-button size="mini" type="danger" plain icon="el-icon-delete-solid"
                  @click="handleDelete(scope.$index, scope.row)">成果</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="footer">
        <div style="margin-top: 20px">
          <el-button @click="selectAll">选择全部</el-button>
          <el-button @click="inverseSelection">反向选择</el-button>
          <el-button @click="toggleSelection()">清楚选择</el-button>
          <el-button @click="toggleSelection()">删除所选</el-button>
        </div>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="400">
          </el-pagination>
        </div>
      </div>
      </div>
      <!-- <div class="footer">
        <div style="margin-top: 20px">
          <el-button @click="selectAll">选择全部</el-button>
          <el-button @click="inverseSelection">反向选择</el-button>
          <el-button @click="toggleSelection()">清楚选择</el-button>
        </div>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="400">
          </el-pagination>
        </div>
      </div> -->
    </div>
  </template>
  
  <script>
  export default {
    name: "jkyj",
    components: {},
    data() {
      return {
        formInline: {
          user: "",
          region: "",
        },
        tableData: [
          {
            serial: "IDM0001",
            numbering: "IDM0001-GNS",
            codename: "GNS",
            name: "巩乃斯林场林中",
            address: "中国新疆伊犁河流域巩乃斯林场",
            data: "2005-05-29",
            personnel: "袁玉江，张同文",
            leader: "尚华明",
            species: "雪岭云杉(Picea schrenkiana )",
            longitude: "84°38'16.3",
            latitude: "43°14'35.8"
          },
          {
            serial: "IDM0002",
            numbering: "IDMO002-BYG",
            codename: "BYG",
            name: "白杨河下",
            address: "中慿国新疆东天山木垒林场",
            data: "2007-09-07",
            personnel: "范子昂",
            leader: "尚华明",
            species: "雪岭云杉(Picea schrenkiana )",
            longitude: "90°27'75.5",
            latitude: "43.36'92"
          },
          {
            serial: "IDM0001",
            numbering: "IDM0001-GNS",
            codename: "GNS",
            name: "巩乃斯林场林中",
            address: "中国新疆伊犁河流域巩乃斯林场",
            data: "2005-05-29",
            personnel: "袁玉江，张同文",
            leader: "尚华明",
            species: "雪岭云杉(Picea schrenkiana )",
            longitude: "84°38'16.3",
            latitude: "43°14'35.8"
          },
          {
            serial: "IDM0002",
            numbering: "IDMO002-BYG",
            codename: "BYG",
            name: "白杨河下",
            address: "中慿国新疆东天山木垒林场",
            data: "2007-09-07",
            personnel: "范子昂",
            leader: "尚华明",
            species: "雪岭云杉(Picea schrenkiana )",
            longitude: "90°27'75.5",
            latitude: "43.36'92"
          },
          {
            serial: "IDM0001",
            numbering: "IDM0001-GNS",
            codename: "GNS",
            name: "巩乃斯林场林中",
            address: "中国新疆伊犁河流域巩乃斯林场",
            data: "2005-05-29",
            personnel: "袁玉江，张同文",
            leader: "尚华明",
            species: "雪岭云杉(Picea schrenkiana )",
            longitude: "84°38'16.3",
            latitude: "43°14'35.8"
          },
          {
            serial: "IDM0002",
            numbering: "IDMO002-BYG",
            codename: "BYG",
            name: "白杨河下",
            address: "中慿国新疆东天山木垒林场",
            data: "2007-09-07",
            personnel: "范子昂",
            leader: "尚华明",
            species: "雪岭云杉(Picea schrenkiana )",
            longitude: "90°27'75.5",
            latitude: "43.36'92"
          },
          {
            serial: "IDM0001",
            numbering: "IDM0001-GNS",
            codename: "GNS",
            name: "巩乃斯林场林中",
            address: "中国新疆伊犁河流域巩乃斯林场",
            data: "2005-05-29",
            personnel: "袁玉江，张同文",
            leader: "尚华明",
            species: "雪岭云杉(Picea schrenkiana )",
            longitude: "84°38'16.3",
            latitude: "43°14'35.8"
          },
          {
            serial: "IDM0002",
            numbering: "IDMO002-BYG",
            codename: "BYG",
            name: "白杨河下",
            address: "中慿国新疆东天山木垒林场",
            data: "2007-09-07",
            personnel: "范子昂",
            leader: "尚华明",
            species: "雪岭云杉(Picea schrenkiana )",
            longitude: "90°27'75.5",
            latitude: "43.36'92"
          },
          {
            serial: "IDM0001",
            numbering: "IDM0001-GNS",
            codename: "GNS",
            name: "巩乃斯林场林中",
            address: "中国新疆伊犁河流域巩乃斯林场",
            data: "2005-05-29",
            personnel: "袁玉江，张同文",
            leader: "尚华明",
            species: "雪岭云杉(Picea schrenkiana )",
            longitude: "84°38'16.3",
            latitude: "43°14'35.8"
          },
          {
            serial: "IDM0002",
            numbering: "IDMO002-BYG",
            codename: "BYG",
            name: "白杨河下",
            address: "中慿国新疆东天山木垒林场",
            data: "2007-09-07",
            personnel: "范子昂",
            leader: "尚华明",
            species: "雪岭云杉(Picea schrenkiana )",
            longitude: "90°27'75.5",
            latitude: "43.36'92"
          },
  
  
        ],
        currentPage4: 4
      };
    },
    created() { },
    methods: {
      onSubmit() {
        console.log("submit!");
      },
      onSearch() {
        console.log("search!");
      },
      selectAll() {
        this.$refs.multipleTable.toggleAllSelection();
      },
      // 反向选择
      // 反选，重新遍历一遍数据
      inverseSelection() {
        this.tableData.forEach((item) => {
          this.$refs.multipleTable.toggleRowSelection(item);
        });
      },
  
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      // 编辑处理
      handleEdit(index, row) {
        console.log("Editing row:", index, row);
        // 可以弹出编辑对话框，并将选中行的数据传递进去
        this.$prompt('请输入新的名称:', row.name, {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          row.name = value; // 更新名称字段
          this.$message({
            type: 'success',
            message: '编辑成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '编辑取消'
          });
        });
      },
  
      // 删除处理
      handleDelete(index, row) {
        console.log("Deleting row:", index, row);
        this.$confirm('确定删除此行数据吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 从表格数据中删除该行
          this.tableData.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '删除取消'
          });
        });
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .container {
    // padding: 1rem;
    background: #fff;
    margin-top: 1.5rem;
  }
  
  .header {
    height: 4rem;
    display: flex;
    align-items: center;
    padding-left: 1rem;
    color: rgb(7, 46, 82);
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* 添加阴影 */
    background: #fff;
    /* 确保背景为白色 */
  }
  
  .content {
  margin: 2rem 2rem;
  border: #eceaeae8 1px solid;
  padding: 1.2rem;
}
  
  .footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .block {
    display: flex;
    gap: 16px; /* Adjust gap to your preference */
    margin-top: 20px;
  }
  
  
  /* 这部分是增加按钮圆角的样式 */
  .el-button {
    border-radius: 5px;
    /* 增大圆角 */
  }
  
  .el-button--primary {
    border-radius: 5px;
    /* 确保主要按钮也有相同的圆角 */
  }
  .el-input .el-input__inner {
    border: 1px solid #dcdfe6; /* 默认边框颜色 */
    box-shadow: none; /* 去掉焦点时的阴影 */
  }
  
  .el-input .el-input__inner:focus {
    border-color: #409EFF; /* 焦点时边框颜色 */
    outline: none; /* 去掉默认的焦点轮廓 */
  }
  </style>